import { lazy, Suspense } from 'react'
// import NotFound from './pages/NotFound'
import { Router, Route, Redirect, Switch } from 'react-router-dom'
// import Login from './pages/Login'
// import Layout from './pages/Layout'
import history from '@/utils/history'
// import { getToken } from './utils/storage'
import PrivateRoute from './components/PrivateRoute'
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const NotFound = lazy(() => import('./pages/NotFound'))

export default function App() {
  return (
    <Router history={history}>
      <Suspense
        fallback={
          <div
            style={{
              textAlign: 'center',
              marginTop: 200,
            }}
          >
            loading...
          </div>
        }
      >
        <div className="App">
          <Switch>
            <Redirect exact from="/" to="/home"></Redirect>
            {/* <Route path="/home" component={Layout}></Route> */}
            <Route path="/login" component={Login}></Route>
            <PrivateRoute path="/home">
              <Layout></Layout>
            </PrivateRoute>
            {/* <Route
            path="/home1"
            render={() => {
              const token = getToken()
              if (token) {
                return <Layout />
              } else {
                return <Redirect to="login" />
              }
            }}
          ></Route> */}
            <Route component={NotFound}></Route>
          </Switch>
        </div>
      </Suspense>
    </Router>
  )
}
